<template>
  <div class="mylist">
    <el-row>
      <el-col>
        <router-link
          :to="{
            path: '/goods/details',
            query: { product_id: list.product_id },
          }"
        >
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <img v-lazy="list.product_picture" class="image" />
            <div>
              <p class="p1">{{ list.product_name }}</p>
              <p class="p2">{{ list.product_title }}</p>
              <p class="p3">
                <span class="price">{{ list.product_price }}元</span>
                <span
                  class="selling_price"
                  v-if="list.product_price != list.product_selling_price"
                  >{{ list.product_selling_price }}元</span
                >
              </p>
            </div>
          </el-card>
        </router-link>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  props: ["list", "isMore"],
  data() {
    return {
      currentDate: "",
    };
  },
};
</script>
<style lang="scss" scoped>
.mylist {
  .el-col {
    width: 234px;
    height: 280px;

    // margin-left: 0 !important;
    .el-card {
      width: 100%;
      border-radius: 0px;
      padding: 10px 0;
      border: none;
      img {
        width: 160px;
        height: 160px;
        margin: 0 37px;
      }
      .p1 {
        margin: 25px 10px 0;
        font-size: 14px;
        color: #333;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      .p2 {
        font-size: 12px;
        color: #b0b0b0;
        margin: 5px 10px;
        text-align: center;
      }
      .p3 {
        margin: 10px 10px 10px;
        text-align: center;
        color: #ff6700;
        padding: 5px 0;
        .selling_price {
          margin-left: 8px;
          color: #b0b0b0;
          text-decoration: line-through;
        }
      }
    }
    .el-card:hover {
      -webkit-transform: translate3d(0, -2px, 0);
      transform: translate3d(0, -2px, 0);
    }
  }
}
</style>
